<template>
  <el-dialog :title="title" @closed="methods.closed" width="800px" ref="dialog" v-model="dialogVisable">
    <el-form :model="props.model" :rules="rules" ref="form" label-position="top" :disabled="props.editType === 'view'">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="所属部门">
            <el-tree-select v-model="props.model.deptId" :data="props.treeData" :render-after-expand="false"
              :props="defaultTreeDataProps"></el-tree-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="props.model.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码">
            <el-input v-model="props.model.idCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="真实姓名">
            <el-input v-model="props.model.realName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话">
            <el-input v-model="props.model.mobileNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户类型">
            <el-select v-model="props.model.userType" placeholder="用户类型">
              <el-option v-for="item in userTypes" :label="item.text" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有效期至">
            <el-date-picker v-model="props.model.expDate" type="date" class="w-full"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否已初始化">
            <el-select v-model="props.model.initialized" placeholder="是否初始化" disabled>
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-select v-model="props.model.sex" placeholder="性别">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务">
            <el-input v-model="props.model.duty"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序">
            <el-input v-model="props.model.sort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最后登录时间">
            <el-input v-model="props.model.lastLoginTime" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="初始密码">
            <el-input v-model="props.model.passwdInit" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="methods.save" :icon="ButtonIcons.finish" v-if="props.editType !== 'view'">
          提交
        </el-button>
        <el-button @click="methods.close" :icon="ButtonIcons.close">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { SysUser } from '~/types/sys/SysUser'
import { EditType, EditTypeText } from '~/types/ui/EditType'
import { UserService } from '~/service/sys'
import elpUtil from '~/utils/elp'
import { ButtonIcons } from '~/components/xview/button'
import { ref, computed, watch } from 'vue'
import msgUtil from '~/utils/message'
import { defaultTreeDataProps } from '~/utils/elp/TreeDataProps'
import { IDeptTreeData } from '~/types/sys/IDeptTreeNode'

const form = elpUtil.refs.form()
const dialog = elpUtil.refs.dialog()

const dialogVisable = ref(false)

const props = withDefaults(
  defineProps<{
    editType: EditType
    model: SysUser
    treeData: IDeptTreeData
    visable: boolean
  }>(),
  {
    show: false,
    editType: 'view',
    treeData: null,
    visable: false
  }
)

const userTypes = ref([{
  value: 1,
  text: '用户类型1'
}, {
  value: 2,
  text: '用户类型2'
}]);

watch(() => props.visable, (val) => {
  dialogVisable.value = val
})
watch(dialogVisable, (val) => {
  emits('update:visable', val)
})

const title = computed(() => {
  return EditTypeText[props.editType] + '用户'
})

const rules = ref({
  userName: [
    {
      required: true,
      message: '用户名必须录入'
    }
  ]
})

const emits = defineEmits(['closed', 'saved', 'update:visable'])

const methods = {
  closed() {
    form!.value.clearValidate()
    emits('closed')
  },
  close() {
    dialogVisable.value = false
  },
  save() {
    form!.value.validate(async (result: boolean) => {
      if (!result) {
        msgUtil.warning('验证错误，请检查输入信息')
        return
      }
      if (props.editType === 'insert') {
        await UserService.insert(props.model)
      } else {
        await UserService.update(props.model)
      }
      emits('saved')
      msgUtil.success('用户信息已成功保存')
      dialogVisable.value = false
    })
  }
}
</script>
